//模板导出文件，和定义打包模板和模板的规范
var htmlwp = require('html-webpack-plugin');

module.exports = {
    //输入的打包的入口文件和要打包的输出文件：
    entry: "./src/main.js",
    output: {
        path: __dirname + '/dist', //输出的路径
        filename: 'build.js' //输出的文件名称
    },
    module: {
        loaders: [
            {
                test: /\.css$/, //打包css文件
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/, //打包scss文件
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.less$/, //打包less文件
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf)$/,
                loader: 'url-loader?limit=20000&name=images/[hash:8].[name].[ext]' //显示图片的大小，超过了这个范围就直接打包成路径到dist目录下面
            },
            {
                test: /\.js$/, //vue1.0中需要将es6语法转化成es5语法
                loader: 'babel-loader',
                exclude: /node_modules/ //排除node_modules
            },
            {
                test: /.vue$/,  // 解析 .vue 组件页面文件
                loader:'vue-loader' 
             }
        ]
    },
    //配置babel的转码规则
    babel: {
        presets: ['es2015'],
        plugins: ["transform-runtime"] //用来解析vue文件的
    },
    plugins: [
        new htmlwp({
            title: "首页", //这个title就是相当于生成页面的title标签中的文字
            filename: "index.html", //在内存中生成的文件
            template: "template.html" //根据这个模板来生成文件
        })
    ]

}